<template>
  <div class="info-box">
    <div ref="btn" class="change-theme-btn" @click="changeColor">改变主题</div>
    <h1>Element Plus</h1>
    <p>基于 Vue 3，面向设计师和开发者的组件库</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const btn = ref<any>(null)
// 声明 document 
declare const document: any;

/* 改变颜色 */
const changeColor = () => {
  // 创建一个过渡对象
  const transition = document.startViewTransition(() => {
    // 给根元素添加 dark 类
    // classList.toggle 这个方法的第一个参数是类名，第二个参数是布尔值，表示是否添加类
    // 如果第二个参数为 true，则添加类；如果第二个参数为 false，则移除类
    document.documentElement.classList.toggle('dark')
  })

  const width = btn.value.getBoundingClientRect().width // 按钮的宽度
  const height = btn.value.getBoundingClientRect().height // 按钮的高度
  const x = btn.value.getBoundingClientRect().x + width / 2 // 按钮的中心x坐标
  const y = btn.value.getBoundingClientRect().y + height / 2 // 按钮的中心y坐标

  // 函数返回所有参数的平方和的平方根，也即 勾股定理的平方根
  // 计算展开圆的半径
  const tragetRadius = Math.hypot(
    Math.max(x , window.innerWidth - x),
    Math.max(y , window.innerHeight - y)
  )

  // 设置过渡的动画效果
  transition.ready.then(() => {
    document.documentElement.animate({
      clipPath: [`circle(0% at ${x}px ${y}px)`, `circle(${tragetRadius}px at ${x}px ${y}px)`]
    }, {
      duration: 1000,
      // pseudoElement 
      // 设置过渡效果的伪元素，这里设置为根元素的伪元素
      // 这样过渡效果就会作用在根元素上
      pseudoElement: '::view-transition-new(root)',
    })
  })
}

</script>


<style>
:root {
  --background-color: #fff;
  --color: #282c34;
  background-color: var(--background-color);
  color: var(--color);
}

:root.dark {
  --background-color: #282c34;
  --color: #fff;
}

/* 隐藏默认的过渡效果 */
::view-transition-new(root),
::view-transition-old(root) {
  animation: none;
}

.change-theme-btn {
  width: 80px;
  height: 40px;
  background-color: var(--background-color);
  text-align: center;
  line-height: 40px;
  color: var(--color);
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid var(--color);
}

.info-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

</style>